<div th:replace="~{ app :: layout ('安装 Docker', ~{::#css}, _, ~{::#main}, ~{::#js}) }" xmlns:th="http://www.thymeleaf.org">
    <div id="css">
        <link href="css/video-js.min.css" rel="stylesheet">
        <link href="vendor/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
        <link href="vendor/vditor/dist/index.css" rel="stylesheet">
    </div>

    <div class="container mb-2rem lecture-show" id="main">
        <h1 class="lecture-title h4">安装 Docker</h1>
        <p class="font-size-14 text-muted">
            <a href="#">ddd</a>
            <span> - </span>
            2023-06-11 14:59:23
            <span> - </span>
            所属视频：<a href="#">Docker 快速入门视频</a>
        </p>
        <div class="row">
            <div class="col-lg-8">
                <div class="video-content">
                    <video id="video-player"
                           class="video-js vjs-big-play-centered"
                           controls
                           preload="auto"
                           width="750"
                           height="421"
                           data-setup="{}">
                        <source src="img/sample.mp4">
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>
                </div>

                <p class="font-size-12 mt-3">文本内容：</p>
                <div id="vditor-preview-element">
                    <p id="content" class="d-none">安装并启动 Docker</p>
                </div>
            </div>
            <div class="col-lg-4 mt-lg-0 mt-4">
                <div>
                    <div class="pb-2 small d-flex justify-content-between">
                        <span>共 1 个章节 • 10 个讲座 • 总时长 00:00</span>
                        <a href="javascript:void(0)" class="toggle-syllabus"></a>
                    </div>
                    <div class="collections-syllabus">
                        <div class="lecture-group-wrapper">
                            <div class="lecture-group-title clearfix" data-toggle="collapse"
                                 data-target="#collapse-1"
                                 aria-expanded="true">
                                <div class="title">
                                    视频列表
                                </div>
                            </div>
                        </div>
                        <div id="collapse-1"
                             class="lecture-list collapse show">
                            <ul>
                                <a href="#">
                                    <li class="lecture">
                                        <span class="lecture-title active">安装 Docker</span>
                                        <p class="font-size-12 text-monospace m-0">
                                            时长：00:00
                                        </p>
                                    </li>
                                </a>
                                <a href="#">
                                    <li class="lecture">
                                        <span class="lecture-title ">运行第一个 Docker 容器</span>
                                        <p class="font-size-12 text-monospace m-0">
                                            时长：00:00
                                        </p>
                                    </li>
                                </a>
                                <a href="#">
                                    <li class="lecture">
                                        <span class="lecture-title ">创建自己的 Docker 镜像</span>
                                        <p class="font-size-12 text-monospace m-0">
                                            时长：00:00
                                        </p>
                                    </li>
                                </a>
                                <a href="#">
                                    <li class="lecture">
                                        <span class="lecture-title ">更新应用并重新构建 Docker 镜像</span>
                                        <p class="font-size-12 text-monospace m-0">
                                            时长：00:00
                                        </p>
                                    </li>
                                </a>
                                <a href="#">
                                    <li class="lecture">
                                        <span class="lecture-title ">分享自己创建的 Docker 镜像</span>
                                        <p class="font-size-12 text-monospace m-0">
                                            时长：00:00
                                        </p>
                                    </li>
                                </a>
                                <a href="#">
                                    <li class="lecture">
                                        <span class="lecture-title ">使用 Docker 命名卷 named volume 持久化数据</span>
                                        <p class="font-size-12 text-monospace m-0">
                                            时长：00:00
                                        </p>
                                    </li>
                                </a>
                                <a href="#">
                                    <li class="lecture">
                                        <span class="lecture-title ">使用 bind mounts 快速搭建本地开发环境</span>
                                        <p class="font-size-12 text-monospace m-0">
                                            时长：00:00
                                        </p>
                                    </li>
                                </a>
                                <a href="#">
                                    <li class="lecture">
                                        <span class="lecture-title ">Docker 多容器应用 Multi-Container Apps</span>
                                        <p class="font-size-12 text-monospace m-0">
                                            时长：00:00
                                        </p>
                                    </li>
                                </a>
                                <a href="#">
                                    <li class="lecture">
                                        <span class="lecture-title ">使用 Docker Compose</span>
                                        <p class="font-size-12 text-monospace m-0">
                                            时长：00:00
                                        </p>
                                    </li>
                                </a>
                                <a href="#">
                                    <li class="lecture">
                                        <span class="lecture-title ">构建 Docker 镜像的最佳实践</span>
                                        <p class="font-size-12 text-monospace m-0">
                                            时长：00:00
                                        </p>
                                    </li>
                                </a>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="js">
        <script>
            $(document).ready(function () {
                $(".toggle-syllabus").on("click", function () {
                    $(this).toggleClass("active");

                    if ($(this).hasClass('active')) {
                        expandAll();
                    } else {
                        collapseAll();
                    }
                })
            });

            function collapseAll() {
                $(".lecture-group-title").each(function () {
                    $(this).addClass('collapsed');
                    $(this).attr('aria-expanded', false);
                    $($(this).attr('data-target')).removeClass('show');
                });
            }

            function expandAll() {
                $(".lecture-group-title").each(function () {
                    $(this).attr('aria-expanded', true);
                    $(this).removeClass('collapsed');
                    $($(this).attr('data-target')).addClass('show');
                });
            }
        </script>

        <script src="js/video.min.js"></script>
        <script>
            videojs('video-player',{
                playbackRates : [.5, 1, 1.5, 2]
                ,fluid: true
            });

            $(function() {
                var aspectRatio = 9 / 16;
                $('.video-player').each(function () {
                    var video_id = $(this).attr('id');
                    videojs(video_id).ready(function () {
                        var myPlayer = this;
                        var width = $('#' + myPlayer.id()).parent().width();
                        myPlayer.width(width).height(width * aspectRatio);
                        window.onresize = function () {
                            var width = $('#' + myPlayer.id()).parent().width();
                            myPlayer.width(width).height(width * aspectRatio);
                        }
                    });
                });
            });
        </script>
    </div>
</div>
